<div id="tranlationcontainer" class="container">
    <form id="inputform" name="inputform" onkeydown="if(event.keyCode==13)return false;">{% csrf_token %}
        <div id="operation" class="row">
            <div class="col form-check form-check-inline">
            <input type="radio" id="en" name="language" value="en" checked>英</input>
            <input type="radio" id="jp" name="language" value="jp">日</input>
            </div>
        </div>
        <div id="input" class="form-floating">
            <textarea id="sentences" name="sentences" class="form-control" placeholder="input sentence or sentences here" style="height:200px"></textarea>
            <label for="sentences">Content</label>
        </div>
        <div class="row">
            <div class="col" style="margin:10px">
            <input type="button" id="transsentence" class="btn btn-primary btn-sm" value="翻译"/>
            <input type="button" id="clearsentence" class="btn btn-secondary btn-sm" value="清空"/>
            </div>
        </div>
    </form>
    <br/>
    <div id="output" class="row">
    </div>
</div>
<!-- 自定义的模态窗口 ajax调用后台执行时展现 begin-->
<div id="loading" style="text-align:center;background-color:rgba(0,0,0,0.7);display:none; position:fixed;width:100%;height:100%;z-index:199;box-sizing: border-box;top:0;left:0;">
    <div class="card" style="width:50%;display:inline-block;top:30%">
        <div class="card-header">
          <h5>提示：</h5>
        </div>
        <div class="card-body">
          <p class="card-text">程序正在运行，请耐心等待......</p>
        </div>
    </div>
</div>
<!-- 自定义的模态窗口 ajax调用后台执行时展现 end-->
<script type="text/javascript">
    function checkradio(){
        return $('input:radio[name="language"]:checked').attr("id");
        }
    function showOrHide(objId){
            obj = $("#"+objId);
            objStatus = obj.css("display");
            if(objStatus == "none"){
                obj.attr("class","btn btn-outline-secondary btn-sm");
                obj.css("display","");
            }else{
                obj.css("display","none");
            }
        }
    $(function(){
            $("#transsentence").click(function(){
                $("#loading").css("display","");
                $.ajax({
                    type:"POST",
                    url:"translate/",
                    data:$("#inputform").serialize(),
                    async:true,
                    error:function(request){
                            console.log("error");
                        },
                    success:function(result){
                        $("#output").empty();
                        $("#output").append(result.vocabulary);
                        },
                    complete:function(result,status){
                        $("#loading").css("display","none");
                        }
                });
            });
            $("#clearsentence").click(function(){
                $("#output").empty();
                $("#sentences").val("");
            });
        });
</script>
